<template>
  <el-table :data="props.tableData" style="width: 100%" stripe>
      <el-table-column label="序号">
        <template #default="{ $index }">
          {{ $index + 1 }}
        </template>
      </el-table-column>
    <el-table-column prop="shelf_id" label="ShelfID" />
    <el-table-column prop="position" label="Position" />
    <el-table-column prop="save_id" label="唯一码" />
    <el-table-column prop="quantity" label="数量" />
    <el-table-column prop="part_num" label="PN" />
    <el-table-column prop="lot_code" label="批次" />
    <el-table-column prop="supplier_id" label="供应商" />
    <el-table-column prop="state" label="状态">
      <template #default="{ row }">
        <el-tag v-if="row.state === 0" type="success" effect="dark" round>正常存储</el-tag>
        <el-tag v-if="row.state === 1" type="danger" effect="dark" round>发料中</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="color" label="颜色">
      <template #default="{ row }">
        <div class="color red" v-if="row.color === 1"></div>
        <div class="color green" v-if="row.color === 0"></div>
        <div class="color green" v-if="row.color === 2"></div>
        <div class="color blue" v-if="row.color === 3"></div>
        <div class="color yellow" v-if="row.color === 4"></div>
        <div class="color purple" v-if="row.color === 5"></div>
        <div class="color cyan" v-if="row.color === 6"></div>
      </template>
    </el-table-column>
    <el-table-column prop="op_code" label="操作码" />
    <el-table-column prop="order_id" label="工单号" />
    <el-table-column prop="pl_name" label="产线" />
    <el-table-column prop="" label="操作">
      <template #default="scope">
        <el-button size="small" type="primary" @click="takeOutHandle(scope.$index, scope.row)">取出</el-button>
      </template>
    </el-table-column>

  </el-table>
</template>

<script lang="ts" setup>
import { takeOut } from '../api/api.js'
import { ElNotification, ElMessageBox } from 'element-plus'

const props = defineProps(['tableData'])

const emit = defineEmits(['some-event', 'refreshStock'])


function takeOutFunc(row) {
  takeOut({ shelf_id: row.shelf_id, position: row.position}).then(function (response: any) {
      console.log(response);
      var result = response.result
      var msg = response.msg
      if (result === 1){
        ElNotification({
        title: 'Success',
        message: msg,
        type: 'success',
      })
      emit("refreshStock")
      }else{
          ElNotification({
          title: 'Error',
          message: msg,
          type: 'error',
        })
      };
    })
    .catch(function (error) {
        ElNotification({
        title: 'Error',
        message: error,
        type: 'error',
      })
    })
    .finally(function () {
        // 总是会执行
    });
}


const takeOutHandle = (index: number, row) => {
  if (row.state === 0) {
    ElMessageBox.confirm(
      '该操作为非法取出,是否继续?',
      '警告',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
      .then(() => {
        takeOutFunc(row)
      })
      .catch(() => {
      })
      return
  }
  takeOutFunc(row)

}


</script>

<style>
.color {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

.blue {
  background-color: blue;
}

.yellow {
  background-color: yellow;
}

.purple {
  background-color: purple;
}

.cyan {
  background-color: cyan;
}

.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}

.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>
